<template>
        <div class="add-port-column">
    <div class="add-port-left">
      <div class="new-get-port">
        <div class="new-get-en">GET</div>
        <div class="new-get-cn">新建请求</div>
      </div>
      <div class="new-post-port">
        <div class="new-post-en">POST</div>
        <div class="new-post-cn">新建请求2</div>
      </div>
      <i class="iconfont font-size-add2" title="添加请求">&#xe638;</i>
    </div> 
    <div class="add-manage-right">
      <div class="manage" title="管理环境" @click="changeSettingFlag">
        <i class="iconfont font-size-right">&#xe666;</i>
        <div class="manage-envi">管理环境</div>
      </div>
    </div>
  </div>
  <!-- 搜索栏目 -->
  <div class="search-column">
    <div class="search-left">
      <div class="search-left-wrapped">
        <!-- 选择请求方式 -->
        <el-menu class="el-menu-demo">
          <el-sub-menu index="2">
            <template #title>
              <div class="search-post">POST</div>
              <!-- <el-menu class="el-menu-demo" mode="horizontal">
          <el-sub-menu index="2">
            <template #title>GET</template>
            <el-menu-item index="2-1">item one</el-menu-item>

              <el-menu-item index="2-2">item two</el-menu-item>
            <el-menu-item index="2-3">item three</el-menu-item> 

          </el-sub-menu>
        </el-menu> -->
            </template>
            <div class="el-items">
              <el-menu
      mode="vertical"
      :default-active="$route.path"
      router 
    >
    <el-menu-item index="/home/get" class="post-item" style="color: #48cfad;">GET</el-menu-item>
          <!-- <el-menu-item index="/home/post" class="post-item" style="color: #409eff;">POST</el-menu-item> -->
      <el-menu-item index="/home/put" class="put-item" style="color: #ffbd4a;">PUT</el-menu-item>
          <el-menu-item index="/home/delete" style="color: #f4658d;">DELETE</el-menu-item>
          </el-menu>
            </div>
          </el-sub-menu>
        </el-menu>
      </div>
    </div>
    <div class="search-mid">
      <el-input class="mid-input" v-model="inputValue"></el-input>
    </div>
    <div class="search-right">
      <el-button class="search-send" @click="sending"> 发送</el-button>
      <el-button class="search-save"> 保存</el-button>
    </div>
  </div>
  <!-- 填写栏目 -->
  <div class="write-column">
    <div class="requset-params-column">
      <div class="params-header">
        <el-menu
          class="el-menu-demo"
          mode="horizontal"
          :default-active="$route.path"
          router
        >
          <el-menu-item index="/home/post/params">Params</el-menu-item>
          <el-menu-item index="/home/post/body">Body</el-menu-item>
          <el-menu-item index="/home/post/cookie">Cookie</el-menu-item>
          <el-menu-item index="/home/post/header">Header</el-menu-item>
          <el-menu-item index="/home/post/auth">Auth</el-menu-item>
          <el-menu-item index="/home/post/setting">设置</el-menu-item>
        </el-menu>
      </div>
      <div class="threeRouter">
        <router-view></router-view>
      </div>
      
    </div>
  </div>
  <!-- 结果栏目 -->
  <div class="result-column">
    <div class="result-column-wrapped">
      <div class="result-column-content">
        <div class="responseDetails">
          <div class="result-column-left">响应结果</div>
          <p>成功200</p>
        </div>
        <div v-if="isObjectEmpty(responseData)" class="responsedata">
          <json-viewer
            :value="responseData"
            :expand-depth="5"
            boxed
            sort
            :show-array-index="false"
            theme="my-awesome-json-theme"
            expanded="true"
            show-double-quotes="true"
          >
          </json-viewer>
        </div>
        <div class="responsedatas" v-else>
          <div class="img-size">
            <img src="@/assets/images/Campaign launch_Flatline.svg" alt="" />
            <div class="click-button-result">点击“发送”按钮再查看结果</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
    
<script setup lang="ts">
import { computed, ref } from "vue";
import axios from "axios";
import { storeToRefs } from "pinia";
import requestSend from "@/stores/modules/requestSend/index";
import Loading from "@/components/Loading/index.vue";
const emit = defineEmits(["changeSetting"]);
// 点击管理环境出现弹出框
const changeSettingFlag = () => {
  emit("changeSetting", true);
};
const requestSendStore = requestSend();
// 定义请求链接
const inputValue = ref(``);
// 定义请求返回结果
const responseData = ref({});
// 定义发送按钮请求结果
const sending = async () => {
  // 点击发送将表格主体内容进行添加
  requestSendStore.tableParamsData.forEach((item) => {
    requestSendStore.addParams(item.name, item.value);
  });
  const res = await axios({
    method: requestSendStore.MethodType,
    url: requestSendStore.manageConfig + inputValue.value,
    params: {
      ...requestSendStore.params,
    },
    data: {
      ...requestSendStore.data,
    },
    headers: {
      ...requestSendStore.headers,
      'Authorization':'Bearer ${token}'
    },
  });
  if (res.status == 200) {
    responseData.value = res.data;
  }
};
// 判断响应结果是否是空数组
const isObjectEmpty = (obj: any) => {
  return Object.keys(obj).length != 0;
};
</script>

<style lang="scss" scoped>
.responseDetails {
  height: 10%;
}
.result-column-content {
  height: 90%;
  .responsedata {
    height: 85%;
  }
}
.threeRouter {
  width: 100%;
  height: 85%;
}
// values are default one from jv-light template
.jv-my-awesome-json-theme {
  background: #fff;
  white-space: nowrap;
  color: #525252;
  font-size: 14px;
  font-family: Consolas, Menlo, Courier, monospace;

  .jv-ellipsis {
    color: #999;
    background-color: #eee;
    display: inline-block;
    line-height: 0.9;
    font-size: 0.9em;
    padding: 0px 4px 2px 4px;
    border-radius: 3px;
    vertical-align: 2px;
    cursor: pointer;
    user-select: none;
  }
  .jv-button {
    color: #49b3ff;
  }
  :deep(.jv-key) {
    color: #a3158d;
  }
  :deep(.jv-item) {
    &.jv-array {
      color: #111111;
    }
    &.jv-boolean {
      color: #38d166;
    }
    &.jv-function {
      color: #067bca;
    }
    &.jv-number {
      color: #fc1e70;
    }
    &.jv-number-float {
      color: #d9d9d9;
    }
    &.jv-number-integer {
      color: #00ad17;
    }
    &.jv-object {
      color: #111111;
    }
    &.jv-undefined {
      color: #e08331;
    }
    &.jv-string {
      color: #0451b9;
      word-break: break-word;
      white-space: normal;
    }
  }
  .jv-code {
    .jv-toggle {
      &:before {
        padding: 0px 2px;
        border-radius: 2px;
      }
      &:hover {
        &:before {
          background: #eee;
        }
      }
    }
  }
}
.search-post {
  display: flex;
  width: 50%;
  height: 100%;
  font-size: 26px;
  align-items: center;
  justify-content: center;
  padding-bottom: 2px;
  color: #409eff;
}
:deep(.el-sub-menu__icon-arrow) {
  top: 22%;
  font-size: 32px;
}
.el-sub-menu {
  width: 100%;
  height: 100%;
}
:deep(.el-sub-menu__title) {
  // width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  .el-sub-menu__icon-arrow {
    margin-top: 0px;
  }
}
.el-menu-demo {
  width: 100%;
  height: 100%;

  :deep(.el-items) {
    width: 100%;
    background-color: #fff;
    // border: 1px solid #fe0000;
    border-radius: 3px;
    box-shadow: 0 0 2px rgb(149, 151, 152);
    position: absolute;
    z-index: 99;
    .put-item {
      z-index: 10;
      background-color: #fff;
      // border-top: 1px solid  #fe0000;
      // border-right: 0.1px solid rgb(14, 44, 73) ;
      box-shadow: 0.2px 0 0px rgb(149, 151, 152);
      &:hover {
        background-color: #ecf5ff;
      }
    }
  }
}
.post-item {
  z-index: 100;
  background-color: #fff;
  border-radius: 3px 3px 0 0;
  box-shadow: 0.2px 0 1px rgb(149, 151, 152);
}
.post-item:hover {
  background-color: #ecf5ff;
}
// 请求栏目css
.add-port-left {
  display: flex;
  align-items: center;
  div {
    cursor: pointer;
  }
  .font-size-add2 {
    cursor: pointer;
  }
}
// 管理环境内容css
.add-manage-right {
  .manage {
    display: flex;
    align-items: center;
    cursor: pointer;
  }
}
.search-mid {
  :deep(.el-input__inner) {
    font-size: 20px;
  }
}
.responseDetails {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  p {
    width: 75px;
  }
}
.responsedata {
  padding: 0px 10px 0px 10px;
  width: 100%;
  margin-top: 10px;
  // height: 290px;
  background-color: #fff;
  overflow-y: scroll;
}
.jv-container.boxed {
  border: none;
  &:hover {
    box-shadow: none;
  }
}
/*滚动条样式*/
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-thumb {
  border-radius: 3px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
}
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}
.responsedatas {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 280px;
  padding: 0px 20px;
  background-color: #fff;
  margin-top: 10px;
}
</style>
